{% extends "pos/base.html" %}
{% load static %}

{% block title %}Business Worth Report{% endblock %}

{% block stylesheets %}

  <style>
    @media print {
      body * { visibility: hidden; }
      #report-container, #report-container * { visibility: visible; }
      #report-container { position: absolute; top:0; left:0; width:100%; }
    }
    tr[data-bs-toggle] { cursor: pointer; }
  </style>
{% endblock %}

{% block heading %}Business Worth Report{% endblock %}

{% block content %}
<div id="report-container">

  {# Date Filters, Compare & Print + Show Multi Toggle #}
  <form method="get" class="mb-3">
    <div class="row g-2 align-items-end">
      <div class="col-auto">
        <label for="date">As of:</label>
        <input type="date" id="date" name="date"
               value="{{ date }}" class="form-control form-control-sm">
      </div>
      <div class="col-auto">
        <a href="#" id="toggle-compare">Compare to another date…</a>
      </div>
      <div class="col-auto" id="compare-section" style="display:none">
        <label for="compare_date">Compare to:</label>
        <input type="date" id="compare_date" name="compare_date"
               value="{{ compare_date }}" class="form-control form-control-sm">
      </div>

      {% if is_master %}
      <div class="col-auto">
        <button id="show-multi-btn" type="button" class="btn btn-info btn-sm">
          <i class="bi bi-grid-1x2"></i> Show Multi Tenants
        </button>
      </div>
      {% endif %}

      <div class="col-auto">
        <button class="btn btn-primary btn-sm">Run Report</button>
        <button type="button" class="btn btn-secondary btn-sm" onclick="window.print()">Print</button>
      </div>
    </div>

    {% if is_master %}
    <div class="row g-2 align-items-end mt-2" id="multi-tenant-section" style="display:none">
      <div class="col-auto">
        <label for="branches">Branches:</label>
      </div>
      <div class="col-auto">
        <select id="branches" name="branches" multiple="multiple"
                class="form-select form-select-sm" style="width:200px">
          {% for br in branches %}
            <option value="{{ br.pos_business_id }}"
              {% if br.pos_business_id|stringformat:"s" in selected_branches %}selected{% endif %}>
              {{ br.company_name }} / {{ br.branch_name }}
            </option>
          {% endfor %}
        </select>
      </div>
      <div class="col-auto">
        <button type="button" id="select-all-branches" class="btn btn-secondary btn-sm">
          <i class="bi bi-check2-square"></i> Select All
        </button>
      </div>
    </div>
    {% endif %}

  </form>

  {# ——— rest of your tables unchanged ——— #}
  {% for section in sections %}
    <h5 class="mt-4">{{ section.title }}</h5>
    <table class="table table-sm table-bordered">
      <thead class="table-light">
        <tr>
          <th style="width:1em"></th>
          <th>Item</th>
          <th class="text-end">Total</th>
        </tr>
      </thead>
      <tbody>
        {% for entry in section.entries %}
          <tr data-bs-toggle="collapse" data-bs-target="#collapse-{{ section.title }}-{{ forloop.counter }}">
            <td><i class="bi bi-chevron-right"></i></td>
            <td>{{ entry.key }}</td>
            <td class="text-end">{{ entry.total|floatformat:2 }}</td>
          </tr>
          <tr class="collapse" id="collapse-{{ section.title }}-{{ forloop.counter }}">
            <td colspan="3" class="p-0">
              <table class="table table-sm mb-0 table-secondary">
                <thead>
                  <tr>
                    {% if entry.items.0.category %}
                      <th>Category</th><th class="text-end">Value</th>
                    {% elif entry.items.0.bank_name %}
                      <th>Bank</th><th class="text-end">Balance</th>
                    {% else %}
                      <th>Name</th><th class="text-end">Balance</th>
                    {% endif %}
                  </tr>
                </thead>
                <tbody>
                  {% for it in entry.items %}
                    <tr>
                      {% if it.category %}
                        <td>{{ it.category }}</td>
                        <td class="text-end">{{ it.value|floatformat:2 }}</td>
                      {% elif it.bank_name %}
                        <td>{{ it.bank_name }}</td>
                        <td class="text-end">{{ it.balance|floatformat:2 }}</td>
                      {% else %}
                        <td>{{ it.name }}</td>
                        <td class="text-end">{{ it.bal|floatformat:2 }}</td>
                      {% endif %}
                    </tr>
                  {% empty %}
                    <tr><td colspan="2" class="text-center">No details</td></tr>
                  {% endfor %}
                </tbody>
              </table>
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  {% endfor %}

  <div class="mb-4">
    <div class="alert alert-info py-2">
      <strong>Total Assets:</strong> {{ assets_total|floatformat:2 }}
      &nbsp;|&nbsp;
      <strong>Total Liabilities:</strong> {{ liabilities_total|floatformat:2 }}
      &nbsp;|&nbsp;
      <strong>Total Growth:</strong> {{ growth|floatformat:2 }}
    </div>
  </div>

  {% if compare_date %}
    {% for section in cmp_sections %}
      <h5 class="mt-5">Change in {{ section.title }}</h5>
      <table class="table table-sm table-bordered">
        <thead class="table-light">
          <tr>
            <th>Metric</th>
            <th class="text-end">Then</th>
            <th class="text-end">Now</th>
            <th class="text-end">Δ</th>
          </tr>
        </thead>
        <tbody>
          {% for row in section.entries %}
            <tr>
              <td>{{ row.key }}</td>
              <td class="text-end">{{ row.then|floatformat:2 }}</td>
              <td class="text-end">{{ row.now|floatformat:2 }}</td>
              <td class="text-end">{{ row.delta|floatformat:2 }}</td>
            </tr>
          {% endfor %}
          <tr class="table-active fw-bold">
            <td>Total</td>
            <td class="text-end">{{ section.totals.then|floatformat:2 }}</td>
            <td class="text-end">{{ section.totals.now|floatformat:2 }}</td>
            <td class="text-end">{{ section.totals.delta|floatformat:2 }}</td>
          </tr>
        </tbody>
      </table>
    {% endfor %}
    <div class="mb-4">
      <div class="alert py-2" style="background-color: #003366; color: white;">
        <strong>Total Assets:</strong> {{ delta_assets|floatformat:2 }}
        &nbsp;|&nbsp;
        <strong>Total Liabilities:</strong> {{ delta_liabilities|floatformat:2 }}
        &nbsp;|&nbsp;
        <strong>Growth:</strong> {{ main_growth|floatformat:2 }}
      </div>
    </div>
  {% endif %}

</div>
{% endblock %}

{% block javascripts %}

  <script>
    document.addEventListener('DOMContentLoaded', function(){
      // collapse chevrons
      document.querySelectorAll('tr[data-bs-toggle]').forEach(row=>{
        row.addEventListener('click', ()=>{
          const icon = row.querySelector('i.bi');
          icon.classList.toggle('bi-chevron-right');
          icon.classList.toggle('bi-chevron-down');
        });
      });
      // compare-date toggle
      document.getElementById('toggle-compare').onclick = e => {
        e.preventDefault();
        const sec = document.getElementById('compare-section');
        sec.style.display = sec.style.display==='none'?'block':'none';
      };

      {% if is_master %}
      // init Select2
      $('#branches').select2({
        placeholder: 'Select branches…',
        allowClear: true,
        width: 'style'
      });
      // select‑all
      $('#select-all-branches').click(function(){
        const all = $('#branches option').map((_,o)=>o.value).get();
        $('#branches').val(all).trigger('change');
      });
      // show/hide multi‑tenant filter
      $('#show-multi-btn').click(function(){
        $('#multi-tenant-section').toggle();
      });
      {% endif %}
    });
  </script>
{% endblock %}